<template>
  <div
    v-if="diamessagetwo.title"
    class="back-dia1"
    :style="{ top: diamessagetwo.top + '%', left: diamessagetwo.left + '%' }"
  >
    <div class="dia1-line1">{{ diamessagetwo.date }}  {{ diamessagetwo.gardenName }}</div>
    <div class="dia1-line2">{{ diamessagetwo.title }}</div>
    <div class="dia1-line3">{{ diamessagetwo.rateFlow }}人</div>
    <div class="dia1-line4">今日客流量</div>
  </div>
</template>

<script>
export default {
  props: {
    diamessagetwo: {
      type: Object,
      default: () => {
        return {
          name: "暂无数据",
          id: 1,
          top: 0,
          left: 26,
          date: "2022/06/01",
          number: 11300,
          service: ''
        };
      }
    }
  },
  data() {
    return {};
  },
  watch: {
    diamessage: {
      handler(newvalue) {
        this.diamessagetwo = newvalue
      }
    }
  }
};
</script>

<style lang="scss" scoped>
    @import "~@/styles/variables.scss";
.back-dia1 {
  width: 146px;
  height: 90px;
  position: absolute;
  z-index: 8;
  background-image: url('../../assets/templeone/backimgone/kuang5.png');
  background-repeat: no-repeat;
  background-size: 146px 90px;
  .dia1-line1{
    margin-left: 12px;
    margin-top: 8px;
    width: 120px;
    text-align: center;
    color: $textColor;
    font-size: 11px;
    border-bottom: #01FDCE 1px solid;
  }
  .dia1-line2{
    width: 146px;
    text-align: center;
    color: $textColor;
    font-size: 9pt;
  }
  .dia1-line3{
    width: 146px;
    text-align: center;
    color: #01FDCE;
     font-size: 10px;
  }
  .dia1-line4{
    width: 146px;
    text-align: center;
    color: #01FDCE;
     font-size: 10px;
  }
}
</style>
